import React, { useEffect } from 'react';
import { Form, Input, Modal, Select, Card, Row, Col } from 'antd';
const FormItem = Form.Item;
import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
import FileUpload from '@/components/FileUpload';
const formItemLayout = {
    labelCol: { span: 20 },
    wrapperCol: { span: 24 },
};
const sexList = [
    { label: '男', value: '1' },
    { label: '女', value: '2' },
    { label: '_', value: '3' },
]
const sendTypeList = [
    { label: '自取', value: '1' },
    { label: '代发', value: '2' },
    { label: '包邮', value: '3' },
]
interface AddOrderProps {
    info: any;
    modalVisible: boolean;
    onSubmit: (fieldsValue: any) => void;
    onCancel: () => void;
}
const AddOrder: React.FC<AddOrderProps> = ({ modalVisible, onSubmit: handleAdd, onCancel, info }) => {
    const [form] = Form.useForm();
    const selectAfter = (
        <Select defaultValue="1" options={sendTypeList}>

        </Select>
    );
    // 表单提交
    const okHandle = async () => {
        const fieldsValue = await form.validateFields();
        handleAdd(fieldsValue);
    };
    useEffect(() => {
        form.setFieldsValue(info.id ? {
            ...info,
            phone: info.phone.split(','),
            mobile_phone: info.mobile_phone.split(','),
            WhatsApp: info.WhatsApp.split(','),
            email: info.email.split(','),
        } : {})
    }, [])
    return (
        <>
            <Modal
                title="添加订单"
                visible={modalVisible}
                okText="保存"
                cancelText="取消"
                width={800}
                onOk={okHandle}
                onCancel={() => onCancel()}
            >
                <Form form={form} layout={'vertical'} {...formItemLayout}>
                    <Card>
                        <p style={{ fontWeight: 'bold' }}>基本信息</p>
                        <Row align="top">
                            <Col span={12} >
                                <FormItem label="姓名" name="name" rules={[{ required: false, message: '请输入姓名' }]}>
                                    <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                </FormItem>
                            </Col>
                            <Col span={12}  >
                                <FormItem label="性别" name="sex" rules={[{ required: false, message: '请选择性别！' }]}>
                                    <Select style={{ width: '80%' }} placeholder="请选择" options={sexList} />
                                </FormItem>
                            </Col>
                            <Col span={12} >
                                <Form.List name="phone" initialValue={['']}>
                                    {(fields, { add, remove }) => (
                                        <>
                                            {fields.map((field, index) => (
                                                <Form.Item
                                                    label={index === 0 ? '电话' : ''}
                                                    required={false}
                                                >
                                                    <Form.Item
                                                        {...field}
                                                        validateTrigger={['onChange', 'onBlur']}
                                                        rules={[
                                                            {
                                                                required: false,
                                                                whitespace: true,
                                                                message: "请输入电话",
                                                            },
                                                        ]}
                                                        noStyle
                                                    >
                                                        <div style={{ width: '100%' }}>
                                                            <Input placeholder="请输入" style={{ width: '80%', marginRight: '5px' }} />
                                                            {index > 0 ? (
                                                                <MinusCircleOutlined
                                                                    className="dynamic-delete-button"
                                                                    onClick={() => remove(field.name)}
                                                                />
                                                            ) : null}
                                                            {index == 0 ? (
                                                                <PlusCircleOutlined
                                                                    className="dynamic-delete-button"
                                                                    onClick={() => add()}
                                                                />
                                                            ) : null}
                                                        </div>

                                                    </Form.Item>
                                                </Form.Item>
                                            ))}
                                        </>
                                    )}
                                </Form.List>
                            </Col>
                            <Col span={12} >
                                <Form.List name="mobile_phone" initialValue={['']}>
                                    {(fieldsPhone, { add, remove }) => (
                                        <>
                                            {fieldsPhone.map((field, index) => (
                                                <Form.Item
                                                    label={index === 0 ? '手机' : ''}
                                                    required={false}
                                                >
                                                    <Form.Item
                                                        {...field}
                                                        validateTrigger={['onChange', 'onBlur']}
                                                        rules={[
                                                            {
                                                                required: false,
                                                                whitespace: true,
                                                                message: "请输入手机",
                                                            },
                                                        ]}
                                                        noStyle
                                                    >
                                                        <Input placeholder="请输入" style={{ width: '80%', marginRight: '5px' }} />
                                                        {index > 0 ? (
                                                            <MinusCircleOutlined
                                                                className="dynamic-delete-button"
                                                                onClick={() => remove(field.name)}
                                                            />
                                                        ) : null}
                                                        {index == 0 ? (
                                                            <PlusCircleOutlined
                                                                className="dynamic-delete-button"
                                                                onClick={() => add()}
                                                            />
                                                        ) : null}
                                                    </Form.Item>
                                                </Form.Item>

                                            ))}
                                        </>
                                    )}
                                </Form.List>
                            </Col>
                            <Col span={12} >
                                <Form.List name="WhatsApp" initialValue={['']}>
                                    {(fieldsPhone, { add, remove }) => (
                                        <>
                                            {fieldsPhone.map((field, index) => (
                                                <Form.Item
                                                    label={index === 0 ? 'Whatsapp' : ' '}
                                                    required={true}
                                                >
                                                    <Form.Item
                                                        {...field}
                                                        validateTrigger={['onChange', 'onBlur']}
                                                        rules={[
                                                            {
                                                                required: false,
                                                                whitespace: true,
                                                                message: "请输入Whatsapp",
                                                            },
                                                        ]}
                                                        noStyle
                                                    >
                                                        <Input placeholder="请输入" style={{ width: '80%', marginRight: '5px' }} />
                                                        {index > 0 ? (
                                                            <MinusCircleOutlined
                                                                className="dynamic-delete-button"
                                                                onClick={() => remove(field.name)}
                                                            />
                                                        ) : null}
                                                        {index == 0 ? (
                                                            <PlusCircleOutlined
                                                                className="dynamic-delete-button"
                                                                onClick={() => add()}
                                                            />
                                                        ) : null}
                                                    </Form.Item>
                                                </Form.Item>

                                            ))}
                                        </>
                                    )}
                                </Form.List>
                            </Col>
                            <Col span={12} >
                                <Form.List name="email" initialValue={['']}>
                                    {(fieldsPhone, { add, remove }) => (
                                        <>
                                            {fieldsPhone.map((field, index) => (
                                                <Form.Item
                                                    label={index === 0 ? '邮箱' : ''}
                                                    required={true}
                                                >
                                                    <Form.Item
                                                        {...field}
                                                        validateTrigger={['onChange', 'onBlur']}
                                                        rules={[
                                                            {
                                                                required: false,
                                                                whitespace: true,
                                                                message: "请输入邮箱",
                                                            },
                                                        ]}
                                                        noStyle
                                                    >
                                                        <Input placeholder="请输入" style={{ width: '80%', marginRight: '5px' }} />
                                                        {index > 0 ? (
                                                            <MinusCircleOutlined
                                                                className="dynamic-delete-button"
                                                                onClick={() => remove(field.name)}
                                                            />
                                                        ) : null}
                                                        {index == 0 ? (
                                                            <PlusCircleOutlined
                                                                className="dynamic-delete-button"
                                                                onClick={() => add()}
                                                            />
                                                        ) : null}
                                                    </Form.Item>
                                                </Form.Item>

                                            ))}
                                        </>
                                    )}
                                </Form.List>
                            </Col>
                            <Col span={12}>
                                <FormItem label="国家" name="country" rules={[{ required: false, message: '请输入国家' }]}>
                                    <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="市" name="city" rules={[{ required: false, message: '请输入市' }]}>
                                    <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="州" name="state" rules={[{ required: false, message: '请输入州' }]}>
                                    <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="邮编" name="postal_code" rules={[{ required: false, message: '请输入邮编' }]}>
                                    <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="公司名称" name="company" rules={[{ required: false, message: '请输入公司名称' }]}>
                                    <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="收货地址" name="receive_address" rules={[{ required: false, message: '请输入收货地址' }]}>
                                    <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                </FormItem>
                            </Col>
                        </Row>
                    </Card>
                    <Card>
                        <p style={{ fontWeight: 'bold' }}>交易信息</p>
                        <Row align="top">
                            <Col span={12}>
                                <FormItem label="付款银行信息" name="bank" rules={[{ required: false, message: '请输入付款银行信息' }]}>
                                    <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="付款账号" name="banke_code" rules={[{ required: false, message: '请输入付款账号' }]}>
                                    <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="成交版型sku" name="sku" rules={[{ required: false, message: '请输入成交版型sku' }]}>
                                    <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="成交量(kwp)" name="kwp" rules={[{ required: false, message: '请输入成交量(kwp)' }]}>
                                    <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="成交数量(pcs)" name="pcs" rules={[{ required: false, message: '请输入成交数量(pcs)' }]}>
                                    <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="托数(pallet)" name="pallet" rules={[{ required: false, message: '请输入托数(pallet)' }]}>
                                    <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="税率(%)" name="rate" rules={[{ required: false, message: '请输入税率(%)' }]}>
                                    <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="成交额(EUR)" name="coupon" rules={[{ required: false, message: '请输入成交额(EUR)' }]}>
                                    <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="优惠Coupon" name="coupon" rules={[{ required: false, message: '请输入优惠Coupon' }]}>
                                    <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="复购与否" name="rep_status" rules={[{ required: false, message: '请输入复购与否' }]}>
                                    <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                </FormItem>
                            </Col>
                        </Row>
                    </Card>
                    <Card>
                        <p style={{ fontWeight: 'bold' }}>物流信息</p>
                        <Row align="top">

                            <Col span={12}>
                                <FormItem label="发货仓库" name="warehouse" rules={[{ required: false, message: '请输入发货仓库' }]}>
                                    <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="物流公司" name="logistics_company" rules={[{ required: false, message: '请输入物流公司' }]}>
                                    <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="发货方式及费用" name="pay_method" rules={[{ required: false, message: '请输入发货方式及费用' }]}>
                                    <Input placeholder="请输入" addonAfter={selectAfter} style={{ width: '80%' }}></Input>
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="物流追踪URL" name="Logistics_url" rules={[{ required: false, message: '请输入物流追踪URL' }]}>
                                    <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem
                                    label="CMR文件"
                                    name="cmrFileUrl"
                                    rules={[{ required: false, message: '请选择CMR文件！' }]}
                                >
                                    <FileUpload ossEnum="PROJECT" multiple={true} max={6} type="image/*,.pdf,.doc,.docx" />
                                </FormItem>
                            </Col>
                        </Row>
                    </Card>
                </Form>

            </Modal>
        </>
    );
};
export default AddOrder;